<%--
  Created by IntelliJ IDEA.
  User: s1xgod
  Date: 2022/9/25
  Time: 19:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件列表</title>
    <link rel="shortcut icon" href="/res/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../js/jquery-3.6.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <%--    该页面不是用子窗口打开的，跳转到登录界面--%>
    <script>
        if (window == top) {
            location.href = "/res/user/login.jsp";
        }
    </script>
    <style>
        <%--        设置表格行高根据数据自适应--%>
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>

<body>
<table id="filelist" lay-filter="test"></table>
</body>

<%--一个操作单元格--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="control"><i
            class="layui-icon layui-icon-more"></i></a>
</script>

<%--条件查询控件--%>
<script type="text/html" id="toolbarDemo">
    <label>文件名</label>
    <div class="layui-inline">
        <input class="layui-input" name="fileName" id="fileName" autocomplete="off"
               placeholder="请输入文件名">
    </div>
    &nbsp;
    <label>文件类型</label>
    <div class="layui-inline">
        <input class="layui-input" name="fileType" id="fileType" autocomplete="off" placeholder="请输入文件类型">
    </div>
    &nbsp;
    <label>用户id</label>
    <div class="layui-inline">
        <input type="number" class="layui-input" name="userId" id="userId" autocomplete="off" placeholder="请输入用户id">
    </div>
    &nbsp;
    <button class="layui-btn" id="find">查询</button>
    <button class="layui-btn" id="clear">条件重置</button>

</script>

<script>
    // 检测该页面的ajax请求发送前，是否已登录
    <%--$(document).ajaxStart(function () {--%>
    <%--    if ("${user}" == "") {--%>
    <%--        top.location.href = "../user/login.jsp"--%>
    <%--        console.log("sss")--%>
    <%--    }--%>
    <%--});--%>

    layui.use(['dropdown', 'table'], function () {
            var $ = layui.jquery;
            // 表格对象
            var table = layui.table;
            // 每行的下拉菜单对象
            var dropdown = layui.dropdown;

            //表格执行渲染
            table.render({
                elem: '#filelist' //指定原始表格元素选择器（推荐id选择器）
                // , height: 315 //容器高度
                , url: '/document/page'
                , page: true
                , toolbar: '#toolbarDemo'
                , loading: true
                , height: 'full-20'
                // 表格数据
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', width: 130, unresize: true, sort: true}
                    , {
                        field: 'fileName', title: '文件', width: 130, sort: true,
                        // 转义
                        templet: function (d) {
                            var str = d.fileName.substring(d.fileName.indexOf(".") + 1, d.fileName.length);
                            // 是图片类型，返回图片
                            if (d.fileType == ".png" || d.fileType == ".jpg" || d.fileType == ".jpeg" || d.fileType == ".gif") {
                                // 该行用户id不为空
                                if (typeof d.userId === 'undefined') {
                                    // 该行用户id为空
                                    return "<div>" + str + "</div><img src = '/document/getfile?path=" + d.fileName + d.fileType + "'>";
                                }
                                return "<div>" + str + "</div><img src = '/document/getfile?path=" + d.userId + "/" + d.fileName + d.fileType + "'>";
                            }
                            // 不是图片类型，返回文件名
                            return str;
                        }
                    }
                    , {field: 'fileType', title: '文件类型', hide: 0, width: 120, unresize: true, sort: true}
                    , {
                        field: 'fileBytes', title: '文件大小', width: 130, unresize: true,
                        // 转义
                        templet: function (d) {
                            if (d.fileBytes > 1000000) {
                                return (d.fileBytes / 1048576).toFixed(2) + " MB"
                            } else {
                                return (d.fileBytes / 1024).toFixed(2) + " KB"
                            }
                        }
                    }
                    , {field: 'remark', title: '文件描述', width: 150}
                    , {field: 'userId', title: '用户id', width: 100, unresize: true, sort: true}
                    , {field: 'createDate', title: '上传时间', width: 300, unresize: true, sort: true}
                    // 操作列
                    , {fixed: 'right', title: '操作', width: 80, templet: '#barDemo'}
                ]]
            });

            //操作单元格的事件
            table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'control') {
                    // 当前文件的上传用户id与当前用户id匹配，则可以删除
                    if (obj.data.userId == "${user.id}" || (typeof obj.data.userId === 'undefined' && "${user.id}" == "")) {
                        var data1 = [{
                            title: '预览'
                            , id: 'view',
                        }, {
                            title: '下载'
                            , id: 'download'
                        }, {
                            title: '删除'
                            , id: 'del'
                        }]
                    } else {
                        var data1 = [{
                            title: '预览'
                            , id: 'view',
                        }, {
                            title: '下载'
                            , id: 'download'
                        }]
                    }
                    action(data1, this, obj.data); // data1：该下拉菜单显示的内容，this：该下拉菜单对象，obj.data：当前行数据
                }
            });

            // 每行的下拉菜单的具体操作
            function action(data1, that, data2) {
                dropdown.render({
                    elem: that
                    , show: true //外部事件触发即显示
                    , data: data1
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                    , click: function (data, othis) {
                        //根据 id 做出不同操作
                        // 删除
                        if (data.id == 'del') {
                            layer.confirm('确定删除吗？', function (index) {
                                $.get("/document/delete", {
                                    "id": data2.id,
                                    "flag": "1"
                                }, function (returnData) {
                                    // 后台返回0表示成功
                                    if (returnData == "0") {
                                        layer.msg("已删除该文件");
                                        updateData();
                                    } else {
                                        layer.msg("服务器繁忙，删除失败")
                                    }
                                })
                            });
                            // 下载
                        } else if (data.id == 'download') {
                            if (typeof data2.userId === 'undefined') {
                                window.open("/document/download?path=" + data2.fileName + data2.fileType, '_blank');
                            } else {
                                window.open("/document/download?userId=" + data2.userId + "&path=" + data2.fileName + data2.fileType, '_blank');
                            }
                            // 预览
                        } else if (data.id == 'view') {
                            if (data2.fileType == ".txt" || data2.fileType == ".png" || data2.fileType == ".jpg" || data2.fileType == ".jpeg" || data2.fileType == ".gif" || data2.fileType == ".ppt" || data2.fileType == ".doc" || data2.fileType == ".xls" || data2.fileType == ".pdf") {
                                // 传入弹出的对象，声明了弹出的样式及内容
                                var el = {
                                    shadeClose: true,
                                    maxmin: true,
                                    closeBtn: false,
                                    min: function (layero, index) {
                                        layer.closeAll();
                                        return false;
                                    },
                                    title: [data2.fileName.substring(data2.fileName.indexOf(".") + 1, data2.fileName.length) + data2.fileType, 'font-size:18px;'],
                                    move: '.layui-layer-title',
                                    area: ['950px', '650px'],
                                    id: 'LAY_layuipro', //设定一个id，防止重复弹出
                                    type: 2,
                                    content: "/document/getfile?userId=" + data2.userId + "&path=" + data2.fileName + data2.fileType
                                }
                                // 如果用户id不存在，则修改弹出传入对象的内容
                                if (typeof data2.userId === 'undefined') {
                                    el.content = "/document/getfile?path=" + data2.fileName + data2.fileType
                                }
                                // 最终弹出弹窗
                                layer.open(el);
                                layer.msg("点击空白区域可关闭预览")
                            } else {
                                layer.msg("目前仅支持在线预览图片/.txt/.doc/.ppt/.xls/.pdf文件，请下载后阅览")
                            }
                        }
                    }

                });
            }

            // 点击条件查询按钮
            $("#find").click(function () {
                updateData();
            })

            // 更新表数据
            function updateData() {
                table.reloadData('filelist', {
                    where: { //设定异步数据接口的额外参数，任意设
                        fileName: $("#fileName").val(),
                        fileType: $("#fileType").val(),
                        userId: $("#userId").val()
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }

            $("#userId").blur(function () {
                if ($("#userId").val() < 0) {
                    layer.msg("用户id的输入值应大于等于0！");
                    $("#userId").val("")
                } else {
                    $("#userId").val(Math.floor($("#userId").val()))
                }
            })

            // 点击条件查询重置按钮
            $("#clear").click(function () {
                $("#fileName").val("");
                $("#fileType").val("");
                $("#userId").val("")
                table.reloadData('filelist', {
                    where: { //设定异步数据接口的额外参数，任意设
                        fileName: "",
                        fileType: "",
                        userId: ""
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            })
        }
    );
</script>
</html>
